<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="name">
        <el-input v-model="list.filter.name" placeholder="地区名称" />
      </el-form-item>
      <el-form-item prop="areaCode">
        <RegionSelect
          v-model="list.filter.areaCode"
          :level="3"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>
      <el-form-item prop="status">
        <Status v-model="list.filter.status" />
      </el-form-item>

      <el-button @click="reset">重置</el-button>
    </el-form>

    <div class="table-operation">
      <AuthButton @click="c" name="新增" />
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column prop="sort" label="展示顺序" />
      <el-table-column prop="name" label="地区名称" />
      <el-table-column label="所属地区">
        <template slot-scope="{ row: { provinceName, cityName, countyName } }">
          <template>{{ provinceName }}</template>
          <template v-if="cityName">- {{ cityName }}</template>
          <template v-if="countyName">- {{ countyName }}</template>
        </template>
      </el-table-column>
      <el-table-column prop="areaInfo" label="地区备注" />
      <el-table-column label="启用状态" width="80" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <AuthButton @click="r({ id: row.id })" name="查看" />
          <AuthButton @click="u({ id: row.id })" name="编辑" />
          <AuthButton @click="d({ id: row.id })" name="删除" />
          <AuthButton @click="createQrCode(row)" name="地区二维码" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      width="70%"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <el-form-item label="选择地区" prop="areaCode" verify>
          <RegionSelect
            v-model="form.data.areaCode"
            :level="3"
            :props="{ checkStrictly: true }"
          />
        </el-form-item>
        <el-form-item label="展示顺序" prop="sort">
          <el-input-number
            v-model="form.data.sort"
            :min="1"
            :max="100"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="地区标签" prop="tags">
          <dynamic-tag v-model="form.data.tags" maxlength="5" count="3" />
        </el-form-item>
        <el-form-item label="地区切换图" prop="coverUrl" verify>
          <Imgpond
            v-model="form.data.coverUrl"
            value-type="string"
            :count="1"
          />
        </el-form-item>
        <el-form-item label="地区标语" prop="title" verify>
          <el-input
            maxlength="30"
            show-word-limit
            placeholder="请输入地区标语，最多30个字符"
            v-model="form.data.title"
            clearable
          />
        </el-form-item>
        <el-form-item label="顶部图集" prop="coverImgList" verify>
          <Imgpond
            v-model="form.data.coverImgList"
            :count="9"
            aspectRatio="375/277"
          />
        </el-form-item>
        <el-form-item label="地区备注" prop="areaInfo">
          <el-input
            type="textarea"
            maxlength="100"
            show-word-limit
            :autosize="{ minRows: 2 }"
            placeholder="请输入地区备注"
            v-model="form.data.areaInfo"
            clearable
          />
        </el-form-item>
        <!-- <el-form-item label="地区介绍" prop="detail" verify>
          <el-input
            type="textarea"
            placeholder="请输入地区介绍"
            show-word-limit
            v-model="form.data.detail"
            maxlength="2000"
            :autosize="{ minRows: 3 }"
            clearable
          ></el-input>
        </el-form-item> -->
        <el-form-item label="必玩景区" prop="scenicSpotIds">
          <ScenicSpot
            v-if="form.show"
            v-model="form.data.scenicSpotIds"
            :maxLength="9"
          />
        </el-form-item>
        <!-- @change="scenicIdChange" -->

        <!-- 标准版第二期已经移除暂时先注释 -->
        <!-- <el-form-item label="上传视频" prop="videoUrl">
          <Filepool
            v-model="form.data.videoUrl"
            :count="1"
            :param="{ dir: 'video' }"
            file-type="video"
          />
        </el-form-item>
        <el-form-item label="视频封面" prop="videoIndexUrl">
          <Imgpond
            v-model="form.data.videoIndexUrl"
            value-type="string"
            :count="1"
            aspectRatio="331/188"
          />
        </el-form-item>
        <el-form-item label="详情图片" prop="imgs">
          <Imgpond v-model="form.data.imgs" value-type="array" />
        </el-form-item>
        <el-form-item label="地点简介" prop="areaInfo">
          <el-input
            maxlength="30"
            show-word-limit
            placeholder="请输入地点简介"
            v-model="form.data.areaInfo"
            clearable
          />
        </el-form-item>
        <el-form-item label="前往路线" prop="route">
          <el-input
            type="textarea"
            maxlength="500"
            placeholder="请填写前往路线"
            v-model="form.data.route"
            :autosize="{ minRows: 3 }"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="详细介绍" prop="detail" verify>
          <el-input
            type="textarea"
            placeholder="请填写详细介绍"
            v-model="form.data.detail"
            maxlength="500"
            :autosize="{ minRows: 3 }"
            clearable
          ></el-input>
        </el-form-item> -->
      </template>
    </KiFormDialog>

    <!-- 聚合码 -->
    <QrCodePreview ref="qrCode" />
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import { DynamicTag } from 'dynamic-tag'
import ScenicSpot from '@/components/ScenicSpot'
import QrCodePreview from '@/components/QrCodePreview'

export default {
  mixins: [pageMixin],
  components: { DynamicTag, ScenicSpot, QrCodePreview },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'one-travel-api/areaInfo',
      form: {
        data: {
          scenicSpotIds: []
        }
      }
    }),
  methods: {
    createQrCode(item) {
      this.$refs.qrCode.show({
        title: item.name + ' - 地区码',
        text: `${import.meta.env.VITE_APP_QRCODE_URL}/destinationQRCode?areaCode=${
          item.areaCode
        }`
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
